<template>
  <div class="crm-page home-page">
    <div class="page-header">线索</div>
    <!-- <div class="page-card pd10">
      <el-row class="page-search" :gutter="10">
        <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="4">  <el-input v-model="queryParam.searchName" placeholder="请输入公司或姓名" /></el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="4">  <el-button type="primary" @click="handleSearch">搜索</el-button></el-col>
      </el-row>
    </div> -->
    <div class="page-content">
      <el-row class="table-btns" :gutter="20">
        <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
          <el-button size="small" @click="handleAdd">新建</el-button>
          <el-button size="small" @click="handleChange">转换</el-button>
          <el-button size="small" @click="handleTransfer">转移</el-button>

          <!-- <el-button size="small" @click="handleDelBatch">删除</el-button> -->
        </el-col>
        <el-col class="align-right" :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
          <el-select v-model="queryParam.searchStatus" style="width:150px;margin-right:10px" @change="changeStatus">
            <el-option label="今天的线索" value="1" />
            <el-option label="我的线索" value="2" />
            <el-option label="全部线索" value="" />
            <!-- <el-option label="最近已查看的线索" value="3" /> -->
          </el-select>
          <el-select v-model="queryParam.status" style="width:100px;margin-right:10px" @change="()=>$refs.table.refresh(true)">
            <el-option label="所有" value="" />
            <el-option v-for="item in clueStatus" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <el-input v-model="queryParam.searchName" style="width:200px;margin-right:10px" placeholder="请输入公司或姓名" />
          <el-button type="primary" @click="handleSearch">搜索</el-button>
        </el-col>

      </el-row>
      <BaseTable
        ref="table"
        :load-data="loadData"
        show-selection
        show-delete
        @delete="handleTableDelete"
      >
        <el-table-column
          label="姓名"
          prop="name"
        >
          <template slot-scope="{row}">
            <a class="table-link" @click="gotoDetail(row)">{{ row.name }}</a>
          </template>
        </el-table-column>
        <el-table-column
          label="公司"
          prop="companyName"
        />
        <el-table-column
          label="职务"
          prop="position"
        />
        <el-table-column
          label="所有人"
          prop="owner"
        />
        <el-table-column
          label="线索状态"
          prop="status"
        >
          <template slot-scope="{row}">
            {{ getEnumText(clueStatus, row.status) }}
          </template>
        </el-table-column>
        <el-table-column
          label="电话"
          prop="phone"
        />

        <el-table-column
          label="邮箱"
          prop="email"
        />
        <el-table-column
          label="创建日期"
          prop="createTime"
          width="200"
        >
          <template slot-scope="{row}">
            {{ formatTime(row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column
          label="创建人"
          prop="createName"
        />
        <el-table-column
          label="操作"
          fixed="right"
          width="100"
          class-name="table-opt-col"
        >
          <template slot-scope="{row}">
            <el-button type="text" :disabled="row.status===4" @click="handleUpdate(row)">编辑</el-button>
            <el-button type="text" :disabled="row.status!==1" @click="delClue(row)">删除</el-button>
          </template>
        </el-table-column>
      </BaseTable>
    </div>
    <AddDialog v-if="visible" :visible="visible" :data="curData" @close="closeDialog" />
    <Transfer v-if="visibleTransfer" :visible="visibleTransfer" :data="curData" @close="closeDialog" />
    <Change v-if="visibleChange" :visible="visibleChange" :data="curData" @close="closeDialog" />
  </div>
</template>
<script>
import AddDialog from './add.vue'
import Transfer from './transfer'
import Change from './change'

import { getClueList, deleteClue, getClue } from '@/api/clue'
import { getEnumText, clueStatus } from '@/utils/enums'
import { formatTime } from '@/utils/tools'
export default {
  name: 'Clue',
  components: { AddDialog, Transfer, Change },
  data() {
    return {
      clueStatus,
      visible: false,
      visibleTransfer: false,
      visibleChange: false,
      curData: {},
      queryParam: {
        searchStatus: '1',
        searchName: '',
        status: ''
      }
    }
  },
  mounted() {
    //
    console.log('渲染了一次：clue')
  },
  methods: {
    handleSearch() {
      this.$refs.table.refresh(true)
    },
    getEnumText,
    formatTime,
    loadData(params) {
      return getClueList(Object.assign(params, this.queryParam)).then((res) => {
        console.log('rrrrrr:', res)
        return res
      })
    },
    changeStatus() {
      this.$refs.table.refresh(true)
    },
    handleAdd() {
      this.curData = {}
      this.visible = true
    },
    handleUpdate(row) {
      getClue({ id: row.id }).then(res => {
        this.visible = true
        this.curData = res
      }).catch((ex) => {
        this.$message({
          type: 'error',
          message: ex.message || '获取数据失败'
        })
      })
    },
    closeDialog(v) {
      this.visible = false
      this.visibleTransfer = false
      this.visibleChange = false
      console.log('vvvvv:', v)
      if (v) {
        this.$refs.table.refresh()
      }
    },
    gotoDetail(row) {
      this.gotoMainPage('clue/info', { id: row.id })
      // this.$router.push({ path: '/clue/info', query: { id: row.id }})
    },
    delClue(row) {
      this.$confirm('确定要删除此线索?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteClue({ ids: [row.id] }).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.$refs.table.refresh()
        }).catch((error) => {
          console.log(error)
          this.$message({
            type: 'error',
            message: error.message || '删除失败'
          })
        })
      }).catch(() => {

      })
    },
    handleTransfer() {
      console.log('this.$refs.table.multipleSelection:', this.$refs.table.multipleSelection)
      if (this.$refs.table.multipleSelection && this.$refs.table.multipleSelection.length <= 0) {
        this.$message.warning('请选择线索')
        return
      }
      if (this.$refs.table.multipleSelection && this.$refs.table.multipleSelection.length > 1) {
        this.$message.warning('只能选择一个线索')
        return
      }

      const data = this.$refs.table.multipleSelection[0]
      // 只有有效的才可以转移 转换
      if (data.status !== 1 && data.status !== 2) {
        this.$message.warning('新建，有效线索才允许转移')
        return
      }
      this.curData = data
      this.visibleTransfer = true
    },
    handleChange() {
      console.log('this.$refs.table.multipleSelection:', this.$refs.table.multipleSelection)
      if (this.$refs.table.multipleSelection && this.$refs.table.multipleSelection.length <= 0) {
        this.$message.warning('请选择线索')
        return
      }
      if (this.$refs.table.multipleSelection && this.$refs.table.multipleSelection.length > 1) {
        this.$message.warning('只能选择一个线索')
        return
      }
      const data = this.$refs.table.multipleSelection[0]
      // 只有新建 有效的才可以转移 转换
      if (data.status !== 2) {
        this.$message.warning('有效的线索才可以转换客户')
        return
      }

      this.curData = data

      this.visibleChange = true
    },
    handleTableDelete(v) {
      this.handleDelBatch()
    },
    handleDelBatch() {
      if (this.$refs.table.multipleSelection && this.$refs.table.multipleSelection.length <= 0) {
        this.$message.warning('请选择线索')
        return
      }
      var f = this.$refs.table.multipleSelection.find(f => f.status !== 1)
      if (f) {
        // 新建状态的线索可以删除，其他状态不允许删
        this.$message.warning('新建状态的线索可以删除，其他状态不允许删')
      }
      this.$confirm('是否确定要删除选中的数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteClue({ ids: this.$refs.table.multipleSelection.map(m => { return m.id }) }).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.$refs.table.refresh()
        }).catch((error) => {
          console.log(error)
          this.$message({
            type: 'error',
            message: error.message || '删除失败'
          })
        })
      }).catch(() => {

      })
    }
  }
}
</script>
